<template>
    <!-- <BaseCharts
        ref="chart"
        :options="options"
        theme="dark"
    /> -->

    <BaseCharts
        ref="chart"
        :options="options"
        :theme="theme"
    />
</template>

<script>
import BaseCharts from "@/components/charts/BaseCharts";
import purplePassion from "../assets/purplePassion.json"
export default {
	components: {
		BaseCharts,
	},
	data() {
		return {
			options: {},
            theme: purplePassion
		};
	},
	mounted() {
		// this.$refs.chart.echarts.registerTheme("purple-passion", purplePassion);
		this.options = {
			color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
			title: {
				text: "Gradient Stacked Area Chart",
			},
			tooltip: {
				trigger: "axis",
				axisPointer: {
					type: "cross",
					label: {
						backgroundColor: "#6a7985",
					},
				},
			},
			legend: {
				data: ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5"],
			},
			toolbox: {
				feature: {
					saveAsImage: {},
				},
			},
			grid: {
				left: "3%",
				right: "4%",
				bottom: "3%",
				containLabel: true,
			},
			xAxis: [
				{
					type: "category",
					boundaryGap: false,
					data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
				},
			],
			yAxis: [
				{
					type: "value",
				},
			],
			series: [
				{
					name: "Line 1",
					type: "line",
					stack: "Total",
					smooth: true,
					lineStyle: {
						width: 0,
					},
					showSymbol: false,
					areaStyle: {
						opacity: 0.8,
						color: new this.$refs.chart.echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: "rgba(128, 255, 165)",
							},
							{
								offset: 1,
								color: "rgba(1, 191, 236)",
							},
						]),
					},
					emphasis: {
						focus: "series",
					},
					data: [140, 232, 101, 264, 90, 340, 250],
				},
				{
					name: "Line 2",
					type: "line",
					stack: "Total",
					smooth: true,
					lineStyle: {
						width: 0,
					},
					showSymbol: false,
					areaStyle: {
						opacity: 0.8,
						color: new this.$refs.chart.echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: "rgba(0, 221, 255)",
							},
							{
								offset: 1,
								color: "rgba(77, 119, 255)",
							},
						]),
					},
					emphasis: {
						focus: "series",
					},
					data: [120, 282, 111, 234, 220, 340, 310],
				},
				{
					name: "Line 3",
					type: "line",
					stack: "Total",
					smooth: true,
					lineStyle: {
						width: 0,
					},
					showSymbol: false,
					areaStyle: {
						opacity: 0.8,
						color: new this.$refs.chart.echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: "rgba(55, 162, 255)",
							},
							{
								offset: 1,
								color: "rgba(116, 21, 219)",
							},
						]),
					},
					emphasis: {
						focus: "series",
					},
					data: [320, 132, 201, 334, 190, 130, 220],
				},
				{
					name: "Line 4",
					type: "line",
					stack: "Total",
					smooth: true,
					lineStyle: {
						width: 0,
					},
					showSymbol: false,
					areaStyle: {
						opacity: 0.8,
						color: new this.$refs.chart.echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: "rgba(255, 0, 135)",
							},
							{
								offset: 1,
								color: "rgba(135, 0, 157)",
							},
						]),
					},
					emphasis: {
						focus: "series",
					},
					data: [220, 402, 231, 134, 190, 230, 120],
				},
				{
					name: "Line 5",
					type: "line",
					stack: "Total",
					smooth: true,
					lineStyle: {
						width: 0,
					},
					showSymbol: false,
					label: {
						show: true,
						position: "top",
					},
					areaStyle: {
						opacity: 0.8,
						color: new this.$refs.chart.echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: "rgba(255, 191, 0)",
							},
							{
								offset: 1,
								color: "rgba(224, 62, 76)",
							},
						]),
					},
					emphasis: {
						focus: "series",
					},
					data: [220, 302, 181, 234, 210, 290, 150],
				},
			],
		};
	},
};
</script>
